<!--
 * @Date: 2023-02-23 10:18:43
 * @LastEditTime: 2023-05-17 11:44:15

 * 介绍:
-->
<script lang="ts" setup>
import { BorderStyle } from "@@/components/types";
const props = withDefaults(
  defineProps<{
    separate?: "col" | "row" | "all" | "none";
    separateColor?: string;
    separateStyle?: BorderStyle;
    separateWidth?: string;
  }>(),
  {
    separateStyle: "solid",
    separateColor: "var(--C-T1-O5)",
    separateWidth: "1rem",
  }
);
</script>

<template>
  <table
    :class="{
      'Ctable__separate-col':
        props.separate === 'col' || props.separate === 'all',
      'Ctable__separate-row':
        props.separate === 'row' || props.separate === 'all',
    }"
    class="Ctable"
    :style="{
      '--Ctable-separateColor': props.separateColor,
      '--Ctable-separateWidth': props.separateWidth,
      '--Ctable-separateStyle': props.separateStyle,
    }"
  >
    <slot></slot>
  </table>
</template>

<style lang="scss" scoped>
.Ctable {
  border-collapse: collapse;
  width: 100%;
}
</style>
<style lang="scss">
.Ctable {
  --separate: var(--Ctable-separateStyle) var(--Ctable-separateColor)
    var(--Ctable-separateWidth);
}
.Ctable__separate-col {
  :where(td, th) + :where(td, th) {
    border-left: var(--separate);
  }
}
.Ctable__separate-row {
  tr + tr {
    border-top: var(--separate);
  }
}
</style>
